<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">
<head th:replace="_header_include::frag(~{::title},~{::link},~{::style})">
    <title>后台管理系统</title>
    <link rel="stylesheet" th:href="@{/css/custom/homepage/index.css}">
    <style>
        .rightBottom {
            position: absolute!important;
            right: 0!important;
            bottom: 0!important;
        }
        .rightBottom .el-dialog__header:before{
            background:none;
        }
    </style>
</head>
<body>
<div id="Loading">
    <div class="loader-inner ball-beat">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<div id="app" ref="homePageVMRef">
    <el-container style="height: 100%;">
        <!-- 头部 -->
        <el-header class="elHeader">        
            <div class="logoimg f-fl">
                <img th:src="@{/images/logoimg.png}" alt="">
            </div>   
            <div class="f-fr">
                <el-button  v-if="consoleBtnVisible" type="primary" @click="openConsolePage" class="f-fl headerBtn headerBtn1"><img th:src="@{/images/icon_stage.png}" alt="" class="f-fl marginR10">我的工作台</el-button>

                <el-button type="primary" @click="openLoginClientDialog" class="f-fl headerBtn"><img th:src="@{/images/icon_head.png}" alt="" class="f-fl marginR10">{{callTitle}}</el-button>

                <el-button type="primary" @click="openOutboundDialog" class="f-fl headerBtn"><img th:src="@{/images/icon_phone.png}" alt="" class="f-fl marginR10">主动外呼</el-button>
                <span class="messageCenterBtn" @click="openMessageCenter">
                    <img th:src="@{/images/icon_news.png}" alt="">
                    <span id="messageCount"></span>
                </span>  
                <!-- 挂断按钮 -->
                <el-button type="primary" @click="ketianHangup" class="f-fl headerBtn" v-if="isRingOff">挂断</el-button>
                <!-- 新增知识库按钮 -->
                <el-button type="primary" @click="opendataBase" class="f-fl headerBtn" v-if="isDataBase">知识库</el-button>
                <!-- 知识库按钮结束 -->
                <!-- <el-button type="primary" class="messageBtn f-fl" @click="openMessageCenter">
                    <em style="color: #e37470;" id="messageCount"></em>
                </el-button> -->  
                <img th:src="@{/images/headIco.png}" alt="" class="headIco">
                <!-- 下拉 -->
                <el-dropdown class="elDropdown f-fr" trigger="click"  @command="handleCommand">
                    <div class="elDropdownBtn">
                        <span>{{user.name}}</span> 
                        <i class="el-icon-caret-bottom"></i>
                    </div>            
                    <el-dropdown-menu slot="dropdown">
                        <!-- 商家版的菜单 -->
                        <!-- <el-dropdown-item command="userInfo">用户信息</el-dropdown-item> -->
                        <el-dropdown-item command="modifyPwd">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <span  @click="toogleClick" :class="{'iconopenBox':isActive,'iconopenBox active':!isActive}">
                <i  :class="{'iconfont el-icon-arrow-left':isActive,'iconfont el-icon-arrow-right':!isActive}"></i>
            </span>
            <!-- 左侧菜单 -->
            <el-aside width="" class="elAside">
                <el-menu 
                    class="el-menu-vertical-demo" 
                    @open="handleOpen" 
                    @close="handleClose" 
                    :collapse="isCollapse" 
                    :default-openeds="defaultOpeneds"
                    :default-active="defaultActive"
                    background-color="rgb(56, 70, 192)" 
                    text-color="rgb(255, 255, 255)">  
                    <!-- foreach menuList start -->
                      <el-submenu :index="index+''" :key="index"  v-for="(item,index) in items">
                        <template slot="title">
                            <!-- <i :class="'fa fa-lg '+ item.iconName"></i> -->
                            <img :src="item.iconUrl" alt="" v-if="item.iconUrl">
                            <span slot="title">{{item.name}}</span>
                        </template>
                        <el-menu-item  class="menu" :key="index+subIndex" :data-url="subItem.url" :index="index+'-'+subIndex" @click="menuClick(subItem.url)" v-for="(subItem,subIndex) in item.subList">
                            <!-- <i :class="'fa fa-lg '+ subItem.iconName"></i> -->
                            <span class="dot"></span>{{subItem.name}}
                        </el-menu-item>
                    </el-submenu> 
                    
                    <!-- foreach menuList end -->
                                      
                </el-menu>
            </el-aside>
            <!-- 右侧内容区 -->
            <el-main class="elMain">
                <iframe  :src="initUrl" id="iframeBox" ref="iframeBox" name='iframe' frameborder="0" width="100%" height="100%">
                    <p>Your browser does not support iframes.</p>
                </iframe>
            </el-main>
        </el-container>
    </el-container>
    
     <!-- 修改密码 dialog start -->
     <el-dialog title="修改密码" :visible.sync="dialogModifyPwdVisible" @close="closeModifyPwdDialog" width="540px">
        <el-form :model="modifyForm" ref="modifyForm" :rules="modifyFormRules">
            <el-form-item label="当前密码：" :label-width="formLabelWidth" prop="oldPassword">
                <el-input type="password" v-model="modifyForm.oldPassword" autocomplete="off" maxlength="30" style="width:290px;"></el-input>
            </el-form-item>
            <el-form-item label="新密码：" :label-width="formLabelWidth" prop="newPassword">
                <el-input  type="password" v-model="modifyForm.newPassword" autocomplete="off"  maxlength="30" style="width:290px;"></el-input>
            </el-form-item>
            <el-form-item label="确认密码：" :label-width="formLabelWidth" prop="confirmPwd">
                <el-input type="password" v-model="modifyForm.confirmPwd" autocomplete="off"  maxlength="30" style="width:290px;"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" center="true">
            <el-button type="primary" @click="saveModifyForm('modifyForm')">保存</el-button>
            <el-button @click="cancelModifyForm('modifyForm')">取 消</el-button>
        </div>
    </el-dialog>
 <!-- 修改密码 dialog end -->
 <!-- 退出登录 dialog start -->
	 <el-dialog title="提示" :visible.sync="dialogLogoutVisible" width="350px" class="logoutDialog" :close-on-click-modal="false">
    	<p style="text-align: center;">确认退出系统吗？</p>
    	<span slot="footer" class="dialog-footer">
    	    <el-button type="primary" @click="confirmLogout">确认</el-button>
    	</span>
    </el-dialog>
 <!-- 退出登录 dialog start -->
 <!-- 知识库 dialog start -->
<el-dialog title="知识库" :visible.sync="dataBasedialogVisible" class="dataBasedialog" :close-on-click-modal="false" width="800px">
    <div class="searchIpt">       
        <el-input v-model="searchDatabaseKeyword" placeholder="输入关键词">
            <el-button slot="append" icon="el-icon-search" @click="searchDatabaseFun">搜索</el-button>
        </el-input>
    </div>
    <div class="searchConditions">
        <div class="clearFix"><span class="f-fl">投资金额：</span>
            <template>
                <el-radio-group v-model="dataBaseInvestMoneyVal" @change="dataBaseClick1">
                    <el-radio-button label="0">不限</el-radio-button>
                    <el-radio-button v-for="(item,index) in dataBaseInvestMoneyArr" :label="index+1">{{item.name}}</el-radio-button>
                </el-radio-group>
            </template>
        </div>
        <div class="clearFix"><span class="f-fl">投资区域：</span>
            <template>
                <el-radio-group v-model="dataBaseInvestAreaVal" @change="dataBaseClick2">
                    <el-radio-button label="0">不限</el-radio-button>
                    <el-radio-button v-for="item in dataBaseInvestAreaArr" :label="item.name">{{item.name}}</el-radio-button>
                </el-radio-group>
            </template>
        </div>
        <div class="clearFix"><span class="f-fl">意向品类：</span>
            <template>
                <el-radio-group v-model="dataBaseCategoryVal" @change="dataBaseClick3">
                    <el-radio-button label="0">不限</el-radio-button>
                    <el-radio-button v-for="item in dataBaseCategoryArr" :label="item.name">{{item.name}}</el-radio-button>
                </el-radio-group>
            </template>
        </div>
    </div>
    <div class="searchResult">
        <div class="clearFix">
            <div class="f-fl">搜索结果：<span v-if="isshowsearchTip">暂无搜索结果</span></div>
            <div class="f-fl searchResultList" v-if="issearchResult">
                <a class="searchResultItem" :href="item.url" v-for="(item,index) in dataBaseResultArr"><span class="f-fl numbg">{{index+1}}</span>{{item.brand_name}}</a>
            </div>
        </div>
    </div>
</el-dialog>
 <!-- 知识库 dialog end -->
 
 <!-- 呼叫中心登录 dialog start -->
     <el-dialog title="呼叫中心" :visible.sync="dialogLoginClientVisible" class="callCenterDialog" :close-on-click-modal="false" width="515px" v-dialog-drag>
     	<el-button type="text" icon="el-icon-minus" class="minDialog" @click="handleMin"></el-button>
        <el-form :model="loginClientForm" ref="loginClientForm" :rules="clientRules">
            <el-form-item label="选择呼叫中心：" :label-width="formLabelWidth105" prop="clientType">
                <el-select v-model="loginClientForm.clientType" placeholder="请选择" value-key="value" @change="changeClientType" style="width: 350px;">
                    <el-option
                        v-for="item in clientTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- 天润 -->
            <template v-if="loginClientForm.clientType==1">
	            <el-form-item label="坐席号：" :label-width="formLabelWidth105" prop="cno">
	                <el-input   v-model="loginClientForm.cno" autocomplete="off"  maxlength="10" style="width: 350px;" @keyup.native="cnoNumber"></el-input>
	            </el-form-item>
	             <el-form-item label="绑定电话：" :label-width="formLabelWidth105" prop="bindPhone">
	                <el-input   v-model="loginClientForm.bindPhone" autocomplete="off"  maxlength="11" style="width: 350px;" @keyup.native="bindPhoneNumber"></el-input>
	            </el-form-item>
                <el-form-item label="绑定类型：" :label-width="formLabelWidth105" prop="bindPhoneType">
                    <el-select v-model="loginClientForm.bindPhoneType" placeholder="请选择" value-key="value" style="width: 350px;">
                       <el-option
                           v-for="item in bindPhoneTypeOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                       </el-option>
                    </el-select>
                </el-form-item>
            </template>
            <!-- 七陌 -->
            <template v-if="loginClientForm.clientType==2">
                <el-form-item label="登录坐席：" :label-width="formLabelWidth105" prop="loginClient">
                    <el-input   v-model="loginClientForm.loginClient" autocomplete="off"  maxlength="10" style="width: 350px;"></el-input>
                </el-form-item>
                <el-form-item label="绑定类型：" :label-width="formLabelWidth105" prop="bindPhoneType">
                    <el-select v-model="loginClientForm.bindPhoneType" placeholder="请选择" value-key="value" style="width: 350px;">
                       <el-option
                           v-for="item in bindPhoneTypeOptions1"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                       </el-option>
                    </el-select>
                </el-form-item>
                <!-- 新增呼叫方式 -->
                <el-form-item label="呼叫方式：" :label-width="formLabelWidth105" prop="callPhoneType">
                    <el-select v-model="loginClientForm.callPhoneType" placeholder="请选择" value-key="value" style="width: 350px;" @change="changeCallPhoneType">
                       <el-option
                           v-for="item in callPhoneTypeOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                       </el-option>
                    </el-select>
                </el-form-item>
                <!-- 新增绑定手机号 -->
                <el-form-item v-if="isShowPhoneNumber" label="绑定手机号：" :label-width="formLabelWidth105" prop="mobilePhoneNumber">
                    <el-input   v-model="loginClientForm.mobilePhoneNumber" autocomplete="off"  maxlength="11" style="width: 350px;" @keyup.native="mobilePhoneNumber" placeholder="输入绑定手机号"></el-input>
                </el-form-item>
                <!-- 七陌登录提示 -->
                <div style="font-size: 12px;padding: 10px 20px;color: #f56c6c;" v-show="isShowTip">
                    选择天翼云呼app呼叫方式，需要注意以下：<br>1，需要app是打开的状态，且当前页面不可锁屏，方可进行打电话。<br>2，只支持安卓手机
                </div>
            </template>
            <!-- 合力 -->
            <template v-if="loginClientForm.clientType==3">
                <el-form-item label="坐席号：" :label-width="formLabelWidth105" prop="cno">
                    <el-input   v-model="loginClientForm.cno" autocomplete="off"  maxlength="10" style="width: 350px;" @keyup.native="cnoNumber"></el-input>
                </el-form-item>
                <el-form-item label="绑定类型：" :label-width="formLabelWidth105" prop="bindPhoneType">
                    <el-select v-model="loginClientForm.bindPhoneType" placeholder="请选择" value-key="value" style="width: 350px;">
                       <el-option
                           v-for="item in bindPhoneTypeOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                       </el-option>
                    </el-select>
                </el-form-item>
            </template>
            <!-- 科天 -->
            <template v-if="loginClientForm.clientType==4">
                <el-form-item label="登录坐席：" :label-width="formLabelWidth105" prop="loginClient">
                    <el-input   v-model="loginClientForm.loginClient" autocomplete="off"  maxlength="10" style="width: 350px;"></el-input>
                </el-form-item>
                <el-form-item label="绑定类型：" :label-width="formLabelWidth105" prop="bindPhoneType">
                    <el-select v-model="loginClientForm.bindPhoneType" placeholder="请选择" value-key="value" style="width: 350px;">
                       <el-option
                           v-for="item in bindPhoneTypeOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                       </el-option>
                    </el-select>
                </el-form-item>
            </template>
            <!-- 容联 -->
            <template v-if="loginClientForm.clientType==5">
                <el-form-item label="登录坐席：" :label-width="formLabelWidth105" prop="loginClient">
                    <el-input   v-model="loginClientForm.loginClient" autocomplete="off"  maxlength="10" style="width: 350px;"></el-input>
                </el-form-item>
            </template>            
        </el-form>        
        <div slot="footer" class="dialog-footer" center="true" style="padding-top: 10px;">
            <el-button type="primary" @click="loginClient('loginClientForm')">登录</el-button>
            <el-button type="info" @click="cancelLoginClientForm('loginClientForm')">取 消</el-button>
        </div>
    </el-dialog>
 <!-- 呼叫中心登录  dialog end -->
 
 <!-- 呼叫中心退出dialog start -->
     <el-dialog title="呼叫中心" :visible.sync="dialogLogoutClientVisible" class="callCenterDialog" :close-on-click-modal="false" width="515px">
     <el-button type="text" icon="el-icon-minus" class="minDialog" @click="logoutMin"></el-button>
        <el-form :model="loginClientForm" ref="logoutClientForm" :rules="loginClientForm.clientType==1?trClientFormRules:qimoClientFormRules">
             <span v-if="loginClientForm.clientType==1">已登录天润呼叫中心</span>
             <span v-if="loginClientForm.clientType==2">已登录七陌呼叫中心</span>
             <span v-if="loginClientForm.clientType==3">已登录合力呼叫中心</span>
             <span v-if="loginClientForm.clientType==4">已登录科天呼叫中心</span>
             <span v-if="loginClientForm.clientType==5">已登录容联呼叫中心</span>
            <template v-if="loginClientForm.clientType==1">
                <el-form-item label="坐席号：" :label-width="formLabelWidth105" prop="cno">
                    {{loginClientForm.cno}}
                </el-form-item>
                 <el-form-item label="绑定电话：" :label-width="formLabelWidth105" prop="bindPhone">
                    {{loginClientForm.bindPhone}}
                </el-form-item>
                <el-form-item label="绑定类型：" :label-width="formLabelWidth105" prop="bindPhoneType">
                    <span v-if="loginClientForm.bindPhoneType==1">普通电话</span>
                    <span v-if="loginClientForm.bindPhoneType==2">手机外显</span>
                </el-form-item>
            </template>
            <template v-if="loginClientForm.clientType==2">
                <el-form-item label="登录坐席：" :label-width="formLabelWidth105" prop="loginClient">
                    {{loginClientForm.loginClient}}
                </el-form-item>
                <el-form-item label="绑定类型：" :label-width="formLabelWidth105" prop="bindPhoneType">
                    <span v-if="loginClientForm.bindPhoneType==1">普通电话</span>
                    <span v-if="loginClientForm.bindPhoneType==2">手机外显</span>
                </el-form-item>
                <!-- 新增呼叫方式 -->
                <el-form-item label="呼叫方式：" :label-width="formLabelWidth105" prop="callPhoneType">
                    <!-- {{loginClientForm.callPhoneType}} -->
                    <span v-if="loginClientForm.callPhoneType==1">话机呼叫</span>
                    <span v-if="loginClientForm.callPhoneType==2">天翼云app呼叫</span>
                    <span v-if="loginClientForm.callPhoneType==3">绑定手机号呼叫</span>
                </el-form-item>
            </template>
             <template v-if="loginClientForm.clientType==3">
                <el-form-item label="坐席号：" :label-width="formLabelWidth105" prop="cno">
                    {{loginClientForm.cno}}
                </el-form-item>
                <el-form-item label="绑定类型：" :label-width="formLabelWidth105" prop="bindPhoneType">
                    <span v-if="loginClientForm.bindPhoneType==1">普通电话</span>
                    <span v-if="loginClientForm.bindPhoneType==2">手机外显</span>
                </el-form-item>
            </template>
            <template v-if="loginClientForm.clientType==4">
                <el-form-item label="登录坐席：" :label-width="formLabelWidth105" prop="loginClient">
                    {{loginClientForm.loginClient}}
                </el-form-item>
                <el-form-item label="绑定类型：" :label-width="formLabelWidth105" prop="bindPhoneType">
                    <span v-if="loginClientForm.bindPhoneType==1">普通电话</span>
                    <span v-if="loginClientForm.bindPhoneType==2">手机外显</span>
                </el-form-item>
            </template>
            <template v-if="loginClientForm.clientType==5">
                <el-form-item label="登录坐席：" :label-width="formLabelWidth105" prop="loginClient">
                    {{loginClientForm.loginClient}}
                </el-form-item>
            </template>            
            
        </el-form>
        <div slot="footer" class="dialog-footer" center="true">
            <el-button type="primary" @click="logoutClient('loginClientForm')">退出</el-button>
        </div>
    </el-dialog>
 <!-- 呼叫中心退出  dialog end -->
  <!--外呼 dialog start -->
     <el-dialog title="主动外呼" :visible.sync="dialogOutboundVisible" :close-on-click-modal="false" class="callCenterDialog1" @close="closeOutboundDialog" width="540px" v-dialog-drag>
        <el-button type="text" icon="el-icon-minus" class="minDialog1" @click="outboundMin"></el-button>
        <el-form>
            <el-form-item  label-width="35px">
                <el-input style="float: left;width: 385px;margin-right: 10px;" autocomplete="off"  maxlength="11" v-model="outboundInputPhone"></el-input>
                <el-button type="primary" @click="clickOutbound" class="callCenterBtn"><img th:src="@{/images/icon_call2.png}" alt=""></el-button>
            </el-form-item>
        </el-form>
           <!--   <input  type="hidden" id="outboundCallStartTime"/> -->
            <div id="outboundCallTimeDiv" class="outboundCallTimeDiv"><img th:src="@{/images/icon_clock.png}" alt="" class="headIco">本次通话时长：<span id="outboundCallTime"></span></div> 
            <div class="outboundCallTimeDiv">归属地：<span id="outboundPhoneLocaleArea"></span></div>
    </el-dialog> 
 <!-- 外呼 dialog end -->
 <!-- 外呼 dialog start 其他页面使用 -->
	 <el-dialog  title="主动外呼" :visible.sync="tmOutboundCallDialogVisible" width="540px" :close-on-click-modal="false" class="callCenterDialog1" @close="closeTmOutboundDialog" v-dialog-drag>
	   <!--  <input  type="hidden" id="tmOutboundCallStartTime"/> -->
	    <div id="tmOutboundCallTimeDiv" class="outboundCallTimeDiv"><img th:src="@{/images/icon_clock.png}" alt="" class="headIco">本次通话时长：<span id="tmOutboundCallTime"></span></div> 
	    <div class="outboundCallTimeDiv">归属地：<span id="tmOutboundPhoneLocaleArea"></span></div>
	</el-dialog>
 
 <!-- 外呼 dialog end 其他页面使用 -->
    <!-- 科天外呼挂断弹窗 dialog start -->
     <el-dialog title="提示" :visible.sync="ringOffdialogVisible" width="350px" :close-on-click-modal="false">
        <p style="text-align: center;">{{ketianInBoundPhone}}</p>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="ketianConnection">接通</el-button>
            <el-button @click="ketianHangup">挂断</el-button>
        </span>
    </el-dialog>
    <!-- 科天外呼挂断弹窗 dialog start -->
</div>

<div id="anndialog">
    <template>
        <el-dialog
                title="公告通知"
                :visible.sync="anndialogVisible" width="60%">
                <el-table
                        :data="AnnDialogTableData"
                        style="width: 100%">
                    <template v-for="(col ,index) in cols">
                        <el-table-column :prop="col.prop" :label="col.label" header-align="center">
                            <template slot-scope="scope">
                                <span style="white-space: pre-wrap">{{scope.row.content_ }}</span>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
            <span slot="footer" class="dialog-footer" >
                <el-button type="primary" @click="updateStatusAnn">我知道了</el-button>
            </span>
        </el-dialog>
    </template>
</div>


<div id="bussdialog">
    <template>
        <el-dialog
                title="消息提醒"
                :visible.sync="cols.bussdialogVisible" width="500px" v-for="(cols,index) in colss" :modal="false"
                custom-class="rightBottom">
            <el-table
                    :data="cols.bussDialogTableData"
                    style="width: 100%">
                <template v-for="(col ,index) in cols.cols">
                    <el-table-column :prop="col.prop" :label="col.label" header-align="center">
                        <template slot-scope="scope">
                            <span style="white-space: pre-wrap">{{scope.row.content_ }}</span>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
            <span slot="footer" class="dialog-footer" >
            <el-button type="primary" @click="updateStatusBuss(index)">我知道了</el-button>
        </span>
        </el-dialog>

        <!--<el-dialog title="消息提醒" :visible.sync="col.bussdialogVisible" width="60%" v-for="(col,index) in cols">-->
            <!--<span class="content">{{col.content}}</span>-->
            <!--<span slot="footer" class="dialog-footer" >-->
            <!--<el-button type="primary" @click="updateStatusBuss(index)">我知道了</el-button>-->
        <!--</span>-->
        <!--</el-dialog>-->
    </template>
</div>
</body>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript">
    var dataBaseUrl=[[${dataBaseUrl}]];//搜索接口
    var isShowDataBase=[[${isShowDataBase}]];//是否展示知识库按钮
    var menuList=[[${menuList}]];//menu list 
    var user=[[${user}]];
    var isUpdatePassword=[[${isUpdatePassword}]];
    var showMenuUrl = menuList[0].subList[0].url;//进首页默认展示页面
    var enterpriseId = [[${enterpriseId}]];
    var token = [[${token}]];
    var accountId = [[${user.id+''}]];
    var isShowConsoleBtn = [[${isShowConsoleBtn}]];
    var showBtnIndex = new Array();
    var defaultActive =null;
    if(isShowConsoleBtn){//console
    	showMenuUrl= "/console/console/index?type=1";
    	showBtnIndex=null;
    }else{
    	showBtnIndex.push("0");
    	defaultActive="0-0";
    }
    
    var accountType = [[${accountType}]];
</script>
<style>
    .el-dialog__footer {text-align: center;}    
    /* 最小化按钮 */
    .el-dialog__wrapper.callCenterDialog  button.el-dialog__headerbtn {display:none!important; }
    .minDialog,.minDialog:hover {position: absolute;top: 12px;right: 14px;background: #fff;width: 18px;height: 18px;color: #5c6be8;border-radius: 50%;padding: 0;line-height: 18px;font-size: 12px;}

    .minDialog1,.minDialog1:hover {position: absolute;top: 12px;right: 40px;background: #fff;width: 18px;height: 18px;color: #5c6be8;border-radius: 50%;padding: 0;line-height: 18px;font-size: 12px;}
    .minDialog:hover,.minDialog1:hover{opacity: 0.6;}
    /*.minDialog i,.minDialog1 i{margin-top: -4px;float: left;margin-left: 7px;}*/

</style>

<script>
    var annDialogVm = new Vue({
        el: '#anndialog',
        data:{
            anndialogVisible:false,
            id:"1084034513090117632",
            annRevid:"",
            AnnDialogTableData:[],
            cols:[]
        },
        methods:{
             updateStatusAnn(){
                 var param = {};
                 param.ids = this.annRevid;
                 axios.post('/annReceive/batchUpdate', param)
                     .then(function (response) {
                         annDialogVm.$message({type: 'success', message: '更新完成!',duration:2000,onClose:function(){
                                 homePageVM.messageCount();
                         }});
                     }).catch(function (error) {console.log(error);});
                 annDialogVm.anndialogVisible = false;
             },
             initDialogData(){
                var param = {};
                param.id = this.id;
                axios.post('/ann/queryOneAnn', param)
                    .then(function (response) {
                        console.log(response.data)
                        if(response.data.code==0){
                            console.log( response.data.data)
                            annDialogVm.AnnDialogTableData = [{content_:response.data.data.content}]
                            annDialogVm.cols =[{ label: response.data.data.title, prop: "content_", type: "normal" }];
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            showOutVisiable:function(){
            }
        }
    });


    var bussDialogVm = new Vue({
        el: '#bussdialog',
        data:{
            bussdialogVisible:false,
            title:"",
            content:"",
            bussRevid:"",
            bussDialogTableData:[],
            colss:[]
        },
        methods:{
            updateStatusBuss(index){
                var param = {};
                param.ids = this.colss[index].bussRevid;
                axios.post('/bussReceive/batchUpdate', param)
                    .then(function (response) {
                        bussDialogVm.$message({type: 'success', message: '更新完成!',duration:2000,onClose:function(){
                                homePageVM.messageCount();
                            }});
                    }).catch(function (error) {console.log(error);});

                var cols=this.cols;
                this.colss[index].bussdialogVisible=false;
            },
            checkMessboxStatus() {
                var count = 0;
                for (let i = 0; i < this.cols.length; i++) {
                    const item = this.cols[i];
                    if (!item.bussdialogVisible) {
                        count++
                    }
                }
                return count == this.cols.length;
            }
            ,initDialogData(title,content,bussRevid){
                var cols ={
                    bussRevid:bussRevid,
                    bussDialogTableData:[{content_:bussDialogVm.content}],
                    cols:[{ label: this.title, prop: "content_", type: "normal" }],
                    bussdialogVisible: true,
                }
                bussDialogVm.colss.push(cols)
            },
            showOutVisiable:function(){
            }
        }
    });

</script>

<script th:src="@{/js/custom/homepage/index.js}"></script>
<script th:src="@{/js/rabbitmq/stomp.js}"></script>
<script th:src="@{/js/rabbitmq/sockjs.js}"></script>



<script type="text/javascript">
    var client;
    var ws_url = '[[${wsUrlHttp}]]';
    var ws_url_https = '[[${wsUrlHttps}]]';
    var mqUserName = '[[${mqUserName}]]';
    var mqPassword = '[[${mqPassword}]]';
    var userId = '[[${userId}]]';

    // var sessionid = '[[${sessionid}]]'
    console.log(userId)
    var urlpath = window.location.href;
    //判断访问地址是否为htts协议
    if(urlpath.indexOf("https://")!=-1){
        ws_url=ws_url_https;
    }
    var ws=null ;
    var numberopt=0;
    function connectMQ() {
        console.log(ws_url+'/ws')
        if (location.search == '?ws') {
            ws = new WebSocket(ws_url+'/ws');
        } else {
            ws = new SockJS(ws_url+'/stomp');
        }
        client = Stomp.over(ws);
        client.heartbeat.outgoing = 30000;//客户端会发送心跳每30000ms
        client.heartbeat.incoming = 0;
        var sessionid='[[${session.sessionid}]]';
        var on_connect = function(x) {
            //只有在登录的时候才能够接收到消息，其他的别的时候是接收不到消息提醒的。
            client.subscribe("/topic/#."+userId, function(data) {
                var msg = data.body;
                console.log("=============================")
                console.log(msg)
                if(msg.indexOf("announce") != -1){
                    var annid = msg.split(",")[1];
                    var annRevid = msg.split(",")[2];
                    setTimeout(function(){homePageVM.messageCount();},1000);
                    annDialogVm.id = annid;
                    annDialogVm.annRevid =annRevid
                    annDialogVm.anndialogVisible=true;
                    annDialogVm.initDialogData();
                }else   if(msg.indexOf("business") != -1){
                    var bussRevid = msg.split(",")[1];
                    var title = msg.split(",")[2];
                    var ccontent = msg.split(",")[3];
                    // homePageVM.messageCount();
                    setTimeout(function(){homePageVM.messageCount();},1000);
                    bussDialogVm.bussRevid =bussRevid
                    bussDialogVm.title = title;
                    bussDialogVm.content = ccontent;
                    // bussDialogVm.bussdialogVisible=true;
                    bussDialogVm.initDialogData(title,ccontent,bussRevid);
                }
            });
            
            client.subscribe("/topic/"+sessionid, function(data) {
            	document.location.href = "/index/logout?type=1";
            });
            client.subscribe("/topic/"+sessionid+"?notUser", function(data) {
            	document.location.href = "/index/logout?type=3";
            });
        };

        var on_error =  function(data) {
            console.log('error');
            if(data.body){data = data.body;}
            //链接一段时间后：链接会断开，断开后自动重连
            if(numberopt==0 && data.indexOf("Whoops! Lost connection")==0) {
                connectMQ();
                // numberopt=1;
                // var param = {"data" : data};
                //$.ajax({type: 'POST', url:rootPath+"/management/index/webSocketLog", contentType : 'application/json', data : JSON.stringify(param), dataType:"json", cache: false, success: function(result){},});
            }
        };
        client.connect(mqUserName, mqPassword, on_connect, on_error, '/');
    }
    connectMQ();
</script>

<!-- <script th:src="@{/js/custom/call/cti-link.js?v=1.0.0}"></script> -->
<script type="text/javascript" src="//agent-gateway-2.cticloud.cn/js/agent/v10/cti-link.js"></script>
<script th:src="@{/js/custom/call/md5.js?v=1.0.0}"></script>
<script th:src="@{/js/custom/call/toolbar.js?v=1.0.1}"></script>
<script th:src="@{/js/custom/call/toolbarIframe.js?v=1.0.1}"></script>
<script th:src="@{/js/custom/call/timer.js?v=1.0.1}"></script>
<script th:src="@{/js/custom/call/rtCall.js?v=1.0.12}"></script>
<!-- 播放錄音 js -->
<script th:src="@{/js/custom/callrecord/simpleAudio.js?v=1.0.0}"></script>
<!-- 导出方法 js-->
<script th:src="@{/js/custom/exportexcel/exportexcel.js?v=1.0.0}"></script>
<script th:src="@{/js/custom/call/ctibar-0.0.1.min.js}"></script>
<script th:src="@{/js/custom/call/ketianToolbar.js}"></script>
</html>